<template>
  <div id="payment">
       <div class="main">
                <h2>
                    个性化定制您的需求
                </h2>
                <div class="demandType common">
                    <div class="left">
                        类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型
                    </div>
                    <div class="right">
                        <div class="borders " 
                        :class="item.now ? 'on' : ''" 
                        @click="edit(item.guid)" 
                        v-for="item in demandType" 
                        :key="item.guid">
                            <div class="box">
                                <div :class="item.classname">
                                    <h3>{{ item.packageName }}</h3>
                                    <ul>
                                        <li v-for="(ele , index) in list" :key="index">
                                            <span v-if="isSHow">·</span>{{ ele.text }}
                                        </li>
                                    </ul>
                                </div>
                                <h4 v-html="item.price"></h4>
                                <div class="fixed">
                                    <img :src="trues" alt="">
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
                <!-- <div class="slide common">
                    <div class="left">
                        回复数量1
                    </div>
                    <div class="right">
                            <el-slider
                                v-model="value"
                                :marks="marks"
                                :max="100"
                                show-input>
                            </el-slider>
                            &nbsp;条
                    </div>
                </div> -->
                <div class="payment common">
                        <div class="left">
                            支付方式
                        </div>
                        <div class="right">
                               <div :class="payType == 1 ? 'active' : ''" @click="payType = 1">
                                   <img :src="wx" alt="">微信支付
                                   <div class="fixed">
                                        <img :src="true1" alt="">
                                   </div>
                               </div>
                               <div :class="payType == 2 ? 'active' : ''" @click="payType = 2">
                                    <img :src="zfb" alt="">支付宝支付
                                    <div class="fixed">
                                        <img :src="true1" alt="">
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="money common">
                            <div class="left">
                                应付金额
                            </div>
                            <div class="right">
                                    ￥{{ allPrice }}
                            </div>
                        </div>
                    <div class="pay common">
                            <div class="left">
                                    去支付去
                            </div>
                            <div class="right"  @click="postMes">
                                    <div>
                                        去支付
                                    </div>
                            </div>
                        </div>
                    
            </div>
            <el-dialog
                title="支付"
                :visible.sync="isPay"
                width="500px"
                :before-close="handleClose">
                <span style="font-size:18px;">是否完成了支付？</span>
                <p style="margin-top:21px;line-height:20px;">请在新的页面中完成充值,充值完成后,请根据充值结果点击下面的按钮</p>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="getPayResult(guid)">支付成功</el-button>
                    <el-button type="primary" @click="isPay = false">支付遇到问题</el-button>
                </span>
            </el-dialog>
  </div>
</template>

<script>
import zx from "@/assets/images/btn-zx.png"
import trues from "@/assets/images/payment/true.png"
import true1 from "@/assets/images/payment/true1.png"
import wx from "@/assets/images/payment/weixin.png"
import zfb from "@/assets/images/payment/zfb.png"
import qrcode from "@/assets/images/qrcode.png"


import QRCode from 'qrcode2';

var timer;
export default {
    data () {
        return {
            erweima:"",
            isPay:false,
            guid:"",
            zx,
            dialogVisible:false,
            trues,
            true1,
            wx,
            qrcode,
            zfb,
            current:1,
            payType:1,
            isSHow:document.body.clientWidth<750 ? false : true,
            value:10,
            nowGuid:"",
            marks: {
                0: '0',
                10: '10',
                20: '20',
                
                50: '50',
                
                100: '100',
            },
            list:[
                {
                    text:"众师抢单"
                },
                {
                    text:"创意新颖"
                },
                {
                    text:"筛选好名"
                },
            ],
            demandType:[
                
            ]
        }
    },
     created () {
        this.init();
        
    },
    watch:{
        dialogVisible(newval , oldval){
            if(newval == false){
                document.getElementById("qrcode").innerHTML = "";
            }
        }
    },
    computed: {
        allPrice(){
            if(this.demandType.length == 0){
                return 0
            };
            
            var total = this.demandType.reduce((total , current)=>{
                
                
                if(current.now == true){
                    this.nowGuid = current.guid;
                    return total = total + current.packagePrice
                }else{
                    return total
                }
            },0)
            return total.toFixed(2)
        } 
    },
    methods: {
        handleClose(done) {
            // this.$confirm('确认关闭？')
            // .then(_ => {
                done();
            // })
            // .catch(_ => {});
        },
        aa(){
            var qrcodes = new QRCode(document.getElementById("qrcode"), {
                text: this.erweima
              })
        },
        wxPay(val){
             let routeUrl = this.$router.resolve({
                path: "/blankwx",
                query: {id:val,payType:'·wx'}
            });
            window.open(routeUrl .href, '_blank');
        },
        aliPay(val){
            // this.$ajax.get("/alipay/qrCode",{
            //     params:{
            //         taskId:val
            //     }
            // },{headers: {'Content-Type': 'text/html;charset=UTF-8'}})
            // .then(res =>{
            //    console.log(res);
            //    this.$router.push(`/blank?id=${res.data}`);
               let routeUrl = this.$router.resolve({
                    path: "/blankzfb",
                    query: {id:val,payType:'zfb'}
                });
                window.open(routeUrl .href, '_blank');
            //    const div = document.createElement('div')
            //     div.innerHTML = res.data //此处form就是后台返回接收到的数据
            //     document.body.appendChild(div)
            //     document.forms[0].submit();
            // })
        },
        getPayResult(val){ // 获取支付结果 
            this.$ajax.post("/userTask/status",{
                taskGuid:val
            })
            .then(res =>{
               if(res.data.data == 10){
                //    this.$message({
                //         message: '支付成功，24小时内客服与你联系!',
                //         type: 'success'
                //     });
                    setTimeout(()=>{
                        this.$router.push('/paySuccess')
                        //  this.$router.push(`/qiming/pub?id=${val}`)
                        //this.$router.push("/info/fkjl");
                    },1000)
                   
               }
               if(res.data.data == 0){
                   this.$message({
                        message: '付款失败!',
                        type: 'success'
                    });
                    setTimeout(()=>{
                        //this.$router.push(`/qiming/pub?id=${val}`)
                        this.$router.push("/info/fkjl");
                    },1000)
                   
               }
               if(res.data.data == 20){
                   this.$message({
                        message: '已中标,跳转到发布页!',
                        type: 'success'
                    });
                    setTimeout(()=>{
                        // this.$router.push(`/qiming/pub?id=${val}`)
                        this.$router.push("/info/fkjl");
                    },1000)
                   
               }
               if(res.data.data == -1){
                   this.$message({
                        message: '订单已取消,请重新付款!',
                        type: 'success'
                    });
                   
               }
            })
        },
        postMes(){
            var obj = JSON.parse(sessionStorage["obj"]) ;
            console.log(obj)
            // if(this.payType == 1){

            // }
            // 
            
            obj.packageGuid = this.nowGuid;
            // obj.replyCount = this.value;
            obj.payType = this.payType;
            // this.$ajax.defaults.headers.common['user-session'] = JSON.parse(sessionStorage.getItem("key"));
            this.$ajax.post("/userTask/publish",obj)
            .then(res =>{
                if(res.data.code == 0){
                    // sessionStorage.setItem("guid",res.data.data.guid);
                    // this.$router.push(`/qiming/pub?id=${res.data.data.guid}`)
                    // window.location.href = `pub.html?id=${res.data.data.guid}`;
                    this.guid = res.data.data.guid;
                    this.isPay = true;
                    if(this.payType == 1){
                        
                        this.wxPay(res.data.data.guid)
                    }else{
                        this.aliPay(res.data.data.guid)
                    }
                }
            })
        },
        init(){
            
            this.$ajax.post("/userTask/packageList")
            .then(res=>{
                var list = res.data.data.forEach(ele =>{
					ele.packagePrice = ele.packagePrice/100
					ele.replyPrice = ele.replyPrice/100
                    if(ele.packageType == 1){
                        ele.classname = "orange";
                        ele.now = true
                    }else if(ele.packageType == 2){
                        ele.classname = "purple";
                        ele.now = false
                    }else{
                        ele.classname = "red";
                        ele.now = false
                    }

                    if(document.body.clientWidth<750){
                        // ele.price = `￥${ele.packagePrice}<br>￥${ele.replyPrice}/条`
                        ele.price = `￥${ele.packagePrice}`
                        // ele.price = ''
                    }else{
                        // ele.price = `￥${ele.packagePrice}<br>￥${ele.replyPrice}/条回复`
                        ele.price = `￥${ele.packagePrice}`
                        // ele.price = ''
                    }
                })
                
                this.demandType = res.data.data;
                
            })
        },
        edit(val){
            var item = this.demandType.find(ele => ele.guid == val);
            this.demandType.forEach(ele => ele.now = false);
            item.now = true;
        }
    },
    
}
</script>

<style lang="scss">
#qrcode{
    img{
        margin: 0 auto;
        align-items: center;
        justify-content: center
    }
}
</style>